<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.lmj-passenger-cell-div{
			    background-color: #FFFFFF;
			    padding-top: 2px;
			    padding-bottom: 1px;
			    margin-bottom: 10px;
			}
			.lmj-table-cell-vcenter{
				vertical-align: middle;
				font-size: 15px;
			}
			.mui-table-cell>button{
				padding: 1px;
				width: 50px;
				margin-left: 12px;
			}
			.lmj-hr{
				border-top:1px solid; 
				height:0px; 
				border-right:0px; 
				border-bottom:0px; 
				border-left:0px;
				border-color:rgba(0,0,0,0.1);
			}
			.radio-check {
				width: 18px;
				height: 18px;
				float: left;
				margin-top: 1px;
				cursor: pointer;
				text-align: center;
				margin-right: 4px;
				background-image: url(images/check.png);
				background-size: 18px;
				background-repeat: no-repeat;
				background-position: -24px 0;
				background-position: 0 0;
			}
			.radio-no-check {
				width: 18px;
				height: 18px;
				float: left;
				margin-top: 1px;
				cursor: pointer;
				text-align: center;
				margin-right: 4px;
				background-image: url(images/on-check.png);
				background-size: 18px;
				background-repeat: no-repeat;
				background-position: -24px 0;
				background-position: 0 0;
			}
			.radioclass {
				opacity: 0;
				cursor: pointer;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				filter: alpha(opacity=0);
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
		    <h1 class="mui-title">常用旅客信息</h1>
		</header>-->
		<div class="mui-content" id="addPassengerDiv">
			<button type="button" class="mui-btn mui-btn-block lmj-add-passenger-btn"><span class="mui-icon mui-icon-plusempty"></span>新增旅客</button>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/comment.js"></script>
		<script type="text/javascript">
			mui.init();
			
			mui.ready(function(){
				var btnArray = ['否', '是'];
				
				//获得全部旅客的信息
				setTimeout(function(){
					jQuery.ajax({
						type:'get',
						url:ajaxUrlPath+'/wx/info/show',
						async:true,
						success:function(data){
							for(var i=0;i<data.length;i++){
								var passCell="<div class='lmj-passenger-cell-div'><div class='mui-content-padded mui-table'><div class='mui-table-cell mui-col-xs-7 lmj-table-cell-vcenter'>";
								if(data[i].isDeleted==2){
									passCell=passCell+"<label><span class='radio-check'><input type='radio' name='defaultPassRadio' class='default-pass-radio radioclass' data-id='"+data[i].id+"' checked></span>设为默认旅客</label>";
								}else{
									passCell=passCell+"<label><span class='radio-no-check'><input type='radio' name='defaultPassRadio' class='default-pass-radio radioclass' data-id='"+data[i].id+"'></span>设为默认旅客</label>";
								}
								passCell=passCell+"</div><div class='mui-table-cell mui-col-xs-5'><button type='button' class='mui-btn lmj-edit-passenger-btn' data-id='"+data[i].id+"'><span class='mui-icon mui-icon-compose'></span>编辑</button>"+
								"<button type='button' class='mui-btn delete-pass-btn' data-id='"+data[i].id+"'><span class='mui-icon mui-icon-closeempty'></span>删除</button></div></div><hr class='lmj-hr'>"+
								"<div class='mui-content-padded'><h4>"+data[i].name+"&nbsp;&nbsp;&nbsp;&nbsp;"+data[i].mobile+"</h4><p>身份证号："+data[i].idNumber+"</p></div></div>";
								jQuery('#addPassengerDiv').append(passCell);
							}
							//设为默认旅客
							defaultPass();
							//删除旅客信息
							deletePass();
							//修改旅客信息
							addEditPass();
						}
					});
				},200);
				
				//设为默认旅客
				function defaultPass(){
					jQuery('.default-pass-radio').bind('click',function(){
						var defaultPassId=jQuery(this).attr('data-id');
						mui.confirm('确定修改默认旅客？', '美丽乡村', btnArray, function(e) {
							if (e.index == 1) {
								//修改
								jQuery.ajax({
									type:'get',
									url:ajaxUrlPath+'/wx/info/default',
									data:{
										id:defaultPassId
									},
									async:true,
									success:function(data){
										mui.alert('修改成功', '美丽乡村', function() {
											window.location.reload();
										});
									},
									error:function(){
										mui.alert('网络不稳定，请稍后再试...', '美丽乡村', function() {
											window.location.reload();
										});
									}
								});
							}
						});
					});
				}
				
				//删除旅客信息
				function deletePass(){
					jQuery('.delete-pass-btn').bind('click',function(){
						var deletePassId=jQuery(this).attr('data-id');
						mui.confirm('确定删除该名旅客？', '美丽乡村', btnArray, function(e) {
							if (e.index == 1) {
								//修改
								jQuery.ajax({
									type:'get',
									url:ajaxUrlPath+'/wx/info/delete',
									data:{
										id:deletePassId
									},
									async:true,
									success:function(data){
										mui.alert('删除成功', '美丽乡村', function() {
											window.location.reload();
										});
									},
									error:function(){
										mui.alert('网络不稳定，请稍后再试...', '美丽乡村', function() {
											window.location.reload();
										});
									}
								});
							} else {
								//未修改
							}
						});
					});
				}
				
				//修改旅客信息
				function addEditPass(){
					jQuery(".lmj-edit-passenger-btn").bind("tap",function(){
						var passengerId=jQuery(this).attr("data-id");
						window.location='add-passenger.html?passengerId='+passengerId;
					});
				}
				
				//新增旅客信息
				jQuery(".lmj-add-passenger-btn").bind("tap",function(){
					window.location='add-passenger.html?passengerId=';
				});
			});
		</script>
	</body>

</html>